import * as React from 'react';
import { ScrollView, StyleSheet, View, Dimensions, Text } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';
const { width, height } = Dimensions.get('window');
const colors = ['tomato', 'thistle', 'skyblue', 'teal'];
export default () => {
    const swiperData = [
        { id: '1', title: '第一页', backgroundColor: 'tomato' },
        { id: '2', title: '第二页', backgroundColor: 'skyblue' },
        { id: '3', title: '第三页', backgroundColor: 'gold' },
        { id: '4', title: '第四页', backgroundColor: 'pink' },
    ];

    const renderSwiperItem = ({ item }) => (
        <View style={[styles.swiperItem, { backgroundColor: item.backgroundColor }]}>
            <Text style={styles.swiperText}>{item.title}</Text>
        </View>
    );

    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <Tester>
                <TestSuite name="SwiperFlatList测试">
                    <ScrollView>
                        <TestCase itShould="useReactNativeGestureHandler={true}">
                            <View style={styles.swiperContainer}>
                                <GestureHandlerRootView style={{ flex: 1 }}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        useReactNativeGestureHandler={true}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </GestureHandlerRootView >
                            </View>
                        </TestCase>
                        <TestCase itShould="useReactNativeGestureHandler={false}">
                            <View style={styles.swiperContainer}>
                                <GestureHandlerRootView style={{ flex: 1 }}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        useReactNativeGestureHandler={false}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </GestureHandlerRootView>
                            </View>
                        </TestCase>
                    </ScrollView>
                </TestSuite>
            </Tester>
        </GestureHandlerRootView>
    );
};

const styles = StyleSheet.create({

    swiperContainer: {
        width: width * 0.7,
        height: height * 0.3,
        alignSelf: 'center',
        borderColor: '#ddd',
        borderRadius: 10,
    },
    swiperItem: {
        width: width * 0.7,
        height: height * 0.3,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
    },
    swiperText: {
        fontSize: 24,
        color: 'white',
        fontWeight: 'bold',
    }
});